<template>
  <div class="widget-item-container">
    <a-form-item v-if="element" :key="element.model" :colon="false" :name="element.model" class="generate-item">
      <packageUnit v-model="data" :element="element" :config="config" :disabled="disabled"></packageUnit>
      <p v-if="!element.options.hidePromptFlag && element.options.promptInfo" class="filed-desc">
        {{ element.options.promptInfo }}
      </p>
    </a-form-item>
  </div>
</template>
<script setup lang="ts">
import { toRefs, computed } from 'vue'
import { WidgetForm } from '../config/antd'
import packageUnit from './packageUnit.vue'
import { getValueByModel } from '../config'

// const emits = defineEmits(['change'])
const props = defineProps<{
  model: any
  config: WidgetForm['config']
  element: any
  disabled: boolean
}>()
const { config, element } = toRefs(props)
const data = computed({
  get: () => getValueByModel(props.model[props.element.model], props.element),
  set: (val) => {
    // eslint-disable-next-line vue/no-mutating-props
    props.model[props.element.model] = val
  }
})
</script>
